<template>
	<view class="">
		<view class="chessboard">
			<view class="row" v-for="(item,i) in chessBoard" :key="i" v-if="chessBoard.length>0">
				<view class="cell" v-for="(subitem,j) in item" :key="j" @click="placePiece(i, j)" :class="getCellClass(i, j)"></view>
			</view>
			
		</view>
		<button v-if="!gameStarted" @click="startGame">开始游戏</button>
		<button v-if="gameOver" @click="resetGame">重新开始</button>
	</view>
	
	
	</template>

	<script>
		export default {
			data () {
				return {
					chessBoard: [],
					wins: [],
					myWin: [],
					computerWin: [],
					over: false,
					count: 0,
					currentPlayer: 1, // 1 for player, 2 for computer
					gameStarted: false,
				    gameOver: false,
				};
			},
			mounted () {
				this.initChessBoard();
				this.initWins();
			},
			methods: {
				initChessBoard () {
					try {
						for (let i = 0; i < 15; i++) {
							this.$set(this.chessBoard,i,[])
							// this.chessBoard[i] = [];
							for (let j = 0; j < 15; j++) {
								// this.chessBoard[i][j] = 0;
								this.$set(this.chessBoard[i],j,0)
								
							}
						}
					} catch (e) {
						//TODO handle the exception
						nsole.log("error init", e);
					}

					console.log("this.chessBoard", this.chessBoard);
				},
				startGame() {
				      this.gameStarted = true;
				      this.initChessBoard();
				      this.initWins();
				      this.currentPlayer = 1;
				      this.over = false;
				      this.gameOver = false;
				    },
				    resetGame() {
				      this.startGame(); // 重置游戏可以复用开始游戏的逻辑
				    },
				initWins () {
					try {
						for (let i = 0; i < 15; i++) {
							this.wins[i] = [];
							for (let j = 0; j < 15; j++) {
								this.wins[i][j] = [];
							}
						}
						// Horizontal, Vertical, Diagonal, and Anti-Diagonal wins
						for (let i = 0; i < 15; i++) {
							for (let j = 0; j < 11; j++) {
								// Horizontal
								for (let k = 0; k < 5; k++) {
									this.wins[i][j + k][this.count] = true;
								}
								this.count++;
							}
						}
						for (let i = 0; i < 15; i++) {
							for (let j = 0; j < 11; j++) {
								// Vertical
								for (let k = 0; k < 5; k++) {
									this.wins[j + k][i][this.count] = true;
								}
								this.count++;
							}
						}
						for (let i = 0; i < 11; i++) {
							for (let j = 0; j < 11; j++) {
								// Diagonal
								for (let k = 0; k < 5; k++) {
									this.wins[i + k][j + k][this.count] = true;
								}
								this.count++;
							}
						}
						for (let i = 0; i < 11; i++) {
							for (let j = 14; j > 3; j--) {
								// Anti-Diagonal
								for (let k = 0; k < 5; k++) {
									this.wins[i + k][j - k][this.count] = true;
								}
								this.count++;
							}
						}

						// 初始化赢法统计数组
						for (let i = 0; i < this.count; i++) {
							this.myWin[i] = 0;
							this.computerWin[i] = 0;
						}
					} catch (e) {
						//TODO handle the exception
						console.log("error wins", e);
					}
				},
				placePiece (i, j) {
					if (this.over || this.chessBoard[i][j] !== 0) {
						return;
					}
					// this.chessBoard[i][j] = this.currentPlayer;
					this.$set(this.chessBoard[i],j,this.currentPlayer)
					
					this.checkWin(i, j, this.currentPlayer);

					if (!this.over) {
						this.currentPlayer = this.currentPlayer === 1 ? 2 : 1;
						this.computerMove();
					}
				},
				checkWin (i, j, player) {
					for (let k = 0; k < this.count; k++) {
						if (this.wins[i][j][k]) {
							player === 1 ? this.myWin[k]++ : this.computerWin[k]++;
							if (player === 1 && this.myWin[k] === 5 || player === 2 && this.computerWin[k] === 5) {
								this.over = true;
								uni.showModal({
									title: 'Game Over',
									content: player === 1 ? 'Player wins!' : 'Computer wins!',
									showCancel: false
								});
								return;
							}
						}
					}
					if (this.over) {
					        this.gameOver = true;
					      }
				},
				getCellClass (i, j) {
					// console.log("i j",i, j,this.chessBoard);
					// return 
					if(this.chessBoard.length>0){
						// console.log("i j",i, j,this.chessBoard);
						
						const cellValue = this.chessBoard[i][j];
						return {
							black: cellValue === 1,
							white: cellValue === 2
						};
					}
					
				},
				computerMove () {
					// Simple AI for demonstration purposes
					// You can improve this logic based on your requirements
					let max = 0;
					let u = 0;
					let v = 0;

					let myScore = Array.from(Array(15), () => Array(15).fill(0));
					let computerScore = Array.from(Array(15), () => Array(15).fill(0));

					for (let i = 0; i < 15; i++) {
						for (let j = 0; j < 15; j++) {
							if (this.chessBoard[i][j] === 0) {
								for (let k = 0; k < this.count; k++) {
									if (this.wins[i][j][k]) {
										if (this.myWin[k] === 1) {
											myScore[i][j] += 200;
										} else if (this.myWin[k] === 2) {
											myScore[i][j] += 400;
										} else if (this.myWin[k] === 3) {
											myScore[i][j] += 2000;
										} else if (this.myWin[k] === 4) {
											myScore[i][j] += 10000;
										}

										if (this.computerWin[k] === 1) {
											computerScore[i][j] += 220;
										} else if (this.computerWin[k] === 2) {
											computerScore[i][j] += 420;
										} else if (this.computerWin[k] === 3) {
											computerScore[i][j] += 2100;
										} else if (this.computerWin[k] === 4) {
											computerScore[i][j] += 20000;
										}
									}
								}

								if (myScore[i][j] > max) {
									max = myScore[i][j];
									u = i;
									v = j;
								} else if (computerScore[i][j] > max) {
									max = computerScore[i][j];
									u = i;
									v = j;
								}
							}
						}
					}
					this.chessBoard[u][v] = 2;
					this.checkWin(u, v, 2);
					if (!this.over) {
						this.currentPlayer = 1;
					}
				},
			},
		};
	</script>

	<style scoped>
	.chessboard {
	  display: grid;
	  width: 90vw;
	  height: 90vw;
	  max-width: 400px;
	  max-height: 400px;
	  grid-template-columns: repeat(15, 1fr);
	  grid-template-rows: repeat(15, 1fr);
	  gap: 1px;
	  border: 1rpx solid black; /* 添加外边框 */
	  background-image: url('../../static/goBangBg.jpg');
	  margin:0 auto;
	}
	.row {
	  display: contents;
	}
	.cell {
	  /* background-color: #ddd; */
	  position: relative;
	  cursor: pointer;
	  border: 1px solid white;
	}
	.cell::after {
	  content: '';
	  display: block;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	 width: 5vw;
	  height: 5vw;
	  max-width: 20px;
	  max-height: 20px;
	  margin-left: -3.0vw;
	  margin-top: -2.5vw;
	  border-radius: 50%;
	  background-color: transparent;
	  transform: translate(-50%, -50%); /* 确保棋子居中 */
	}
	.cell.black::after {
	  background-color: black;
	}
	.cell.white::after {
	  background-color: white;
	}
	</style>